<template>
  <div class="reset-password-send-code">
    <div class="forget-content normal content-main">
      <h1 class="forget-title">忘记密码</h1>
      <div class="forget-input">
        <div class="flex-space">
          <el-input placeholder="请输入登录邮箱" v-model="email" />
          <el-button v-if="sendable" @click="handleSendEmailCode">发送验证码</el-button>
        </div>
      </div>
      <nuxt-link class="active" to="/">
        <i class="el-icon-back"></i>
        返回首页
      </nuxt-link>

      <div class="cover-layer" v-if="showLoadingLayer">
        <i class="el-icon-loading"></i>
      </div>
    </div>
  </div>
</template>

<script>
import API from '~/interface/User';
import formRule from '~/static/utils/Rules';
export default {
  data() {
    return {
      email: '',
      sendable: true,
      showLoadingLayer: false
    }
  },

  methods: {
    handleSendEmailCode() {
      let email = this.email;
      let { trimSpace, checkEmail } = formRule;

      if (trimSpace(email) && checkEmail(email)) {
        this.sendEmailCodeMessage(email);
      } else {
        this.$message.error('邮箱格式错误!');
      }
    },

    // 发送邮箱验证码
    sendEmailCodeMessage(email) {
      this.showLoadingLayer = true;
      API.postChangeCode({ email }).then(res => {
        this.$message(res.msg);
        this.showLoadingLayer = false;
        sessionStorage.cacheEmail = email;
        this.$router.replace('/user/password');
      }).catch(err => {
        this.showLoadingLayer = false;
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.reset-password-send-code {
  position: relative;
  height: 100%;

  .forget-content {
    width: 500px;
    margin: 120px auto 0;

    .forget-input {
      margin: 20px 0;

      .flex-space .el-button {
        margin-left: 10px;
      }

      .el-button {
        min-width: 115px;
        border-radius: 0;
      }
    }

    .submit-btn {
      width: 100%;
      background-color: var(--theme);
      border-color: var(--theme);
      color: #fff;
    }
  }

  .cover-layer .el-icon-loading {
    font-size: 50px;
    color: #fff;
  }
}
</style>